<template>
  <div class='list-wrap' style='margin-top: 10px;'>
    <a-row class='list-row' :gutter='24'>
      <a-col
        v-for='item in renderData'
        :key='item.id'
        :xs='12'
        :sm='12'
        :md='12'
        :lg='6'
        :xl='6'
        :xxl='6'
        class='list-col'
        style='min-height: 162px'
      >
        <CardWrap
          :title='item.title'
          :description='item.description'
          :default-value='item.enable'
          :action-type='item.actionType'
          :expires='item.expires'
          :open-txt="'启用分组'"
          :close-txt="'禁用分组'"
          :expires-text="'启用分组'"
          :tag-text="'已启用'"
          :expires-tag-text="'已禁用'"
          :icon='item.icon'
        >
          <template #skeleton>
            <a-skeleton :animation='true'>
              <a-skeleton-line :widths="['100%', '40%', '100%']" :rows='3' />
              <a-skeleton-line :widths="['40%']" :rows='1' />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang='ts' setup>
import CardWrap from "./card-wrap.vue";

const renderData = [
  {
    "id": "1",
    "title": "双11专属用户短链分发组",
    "description": "为即将到来的双十一购物狂欢节活动，精心准备并管理一系列独特的、针对每位用户的个性化短连接（短链）。",
    "enable": true,
    "actionType": "button"
  }, {
    "id": "2",
    "title": "618专属用户短链分发组",
    "description": "为即将到来的618购物狂欢节活动，精心准备并管理一系列独特的、针对每位用户的个性化短连接（短链）。",
    "enable": true,
    "actionType": "button",
    "expires": true
  }, {
    "id": "3",
    "title": "315活动分组",
    "description": "为即将到来的315购物狂欢节活动，精心准备并管理一系列独特的、针对每位用户的个性化短连接（短链）。",
    "enable": false,
    "actionType": "button"
  }, {
    "id": "4",
    "title": "默认分组",
    "description": "SaaS短链系统默认分组",
    "enable": true,
    "actionType": "button"
  }
];
</script>

<style scoped lang='less'></style>
